<template>
  
  <div class="m-goods-cell" @click="click">
    
    <div class="goods-img">
      <img
        class="main-img"
        :src="value.pic"
      />
    </div>
    <div class="goods-desc">
      <div class="desc-name">
        <p>{{value.subTitle}}</p>
      </div>
      <div class="desc-tag">
        <span class="tag-item">{{value.name}}</span>
      </div>
      <div class="desc-price">
        <div class="price-value">
          <label>￥</label>
          <span class="value-big">{{value.skuPrice}}</span>
        </div>
      </div>
      <div class="desc-info">
        <span class="info-self" v-if="value.promotionType !=0">活动</span>
        <span class="info-evaluate">库存{{value.stock}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  name: "m-goods-cell",
  props: {
    value: Object
  },
  methods:{
    click(){
      this.$emit("click",this.value)
    }
  }
};
</script>
<style scoped>

p {
  display: inline;
  word-break: break-all;
}

.m-goods-cell {
  display: flex;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.goods-img {
  position: relative;
  flex-basis: 120px;
  height: 120px;
  
  padding: 15px 15px 15px 15px;
}
.main-img {
  width: 100%;
  height: 100%;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.05);
  border-radius:4px;
}



.goods-desc {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 15px 5px 5px 15px;
}

.desc-name {
  color: #232326;
  font-size: 15px;
  line-height: 20px;
  flex-basis: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}

.desc-tag {
  display: flex;
  flex-basis: 29px;
  align-items: center;
}
.desc-price {
  flex-basis: 20px;
  display: flex;
}
.price-value {
  display: flex;
  flex-grow: 0;
  align-items: flex-end;
  color: #f23030;
}

.value-big {
  font-size: 16px;
}
.value-small {
  font-size: 12px;
}
.price-value label {
  font-size: 14px;
}

.desc-info {
  display: flex;
  flex: 1;
  align-items: center;
  font-size: 12px;
}
.info-self {
  padding: 0 3px;
  border: 1px solid #f23030;
  border-radius: 2px;
  color: #f23030;
  transform: scale(0.8);
}
.info-evaluate {
  margin-left: 10px;
  color: gray;
}
.cart-btn {
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>

